<template>
  <div>
    <el-container>
      <el-header>用户管理界面</el-header>
      <el-container>
        <el-aside style="border: 5px solid #eee">
          <el-menu>
            <el-submenu index="1">
              <!-- 子菜单命名 -->
              <template slot="title">
                <span>基本信息管理</span>
              </template>

              <!-- 子菜单选项 -->
              <el-menu-item-group>
                <router-link to="/cus">
                  <el-menu-item index="1-1">客户管理</el-menu-item>
                </router-link>
                <router-link to="/goods">
                  <el-menu-item index="1-2">商品管理</el-menu-item>
                </router-link>
                <router-link to="/emp">
                  <el-menu-item index="1-3">员工管理</el-menu-item>
                </router-link>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <!-- 子菜单命名 -->
              <template slot="title">
                <span>采购信息管理</span>
              </template>

              <!-- 子菜单选项 -->
              <el-menu-item-group>
                <router-link to="/mainBuy">
                  <el-menu-item index="2-1">采购主表管理</el-menu-item>
                </router-link>
                <router-link to="/payDetail">
                  <el-menu-item index="2-2">采购明细管理</el-menu-item>
                </router-link>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-main>
          <el-button type="primary" round @click="dialogVisible1 = true">查询员工信息</el-button>

          <el-dialog
            title="查询员工"
            :visible.sync="dialogVisible1"
            width="20%"
          >
            <el-form>
              <el-form-item label="请输入员工的编号">
                <el-input v-model="askEmp.eid"></el-input>
              </el-form-item>
            </el-form>

            <span slot="footer" >
              <el-button @click="dialogVisible1 = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible1 = false,select(askEmp.eid)">确 定</el-button>
              
            </span>
            
          </el-dialog>
          
          <el-dialog
              title="查询员工结果"
              :visible.sync="selectRes"

              width="75%"
              >
                <!-- <el-form>

                  <el-form-item label="员工编号:">
                    {{askEmp.eid}}
                  </el-form-item>
                  <el-form-item label="员工姓名:">
                    {{askEmp.ename}}
                  </el-form-item>
                  <el-form-item label="员工密码:">
                    {{askEmp.epas}}
                  </el-form-item>
                  <el-form-item label="员工级别:">
                    {{askEmp.elevel}}
                  </el-form-item>
                  <el-form-item label="员工电话:">
                    {{askEmp.etelPhone}}
                  </el-form-item>
                  <el-form-item label="员工工资:">
                    {{askEmp.esalary}}
                  </el-form-item>
                  <el-form-item label="备注:">
                    {{askEmp.other}}
                  </el-form-item>
                </el-form> -->
                 <el-table :data="tmptb" border stripe style="width: 70%">
                  <el-table-column prop="eid" label="员工编号" width="150"></el-table-column>
                  <el-table-column prop="ename" label="员工姓名" width="150"></el-table-column>
                  <el-table-column prop="elevel" label="员工级别" width="150"></el-table-column>
                  <el-table-column prop="epas" label="员工密码" width="150"></el-table-column>
                  <el-table-column prop="etelPhone" label="员工电话" width="150"></el-table-column>
                  <el-table-column prop="esalary" label="员工工资" width="150" ></el-table-column>
                  <el-table-column prop="other" label="备注" width="150"></el-table-column>
                </el-table>
               <el-button @click="selectRes = false">退出</el-button>
              
          </el-dialog>

          <el-button type="primary" round @click="dialogVisible2 = true">删除员工信息</el-button>

          <el-dialog
            title="删除员工"
            :visible.sync="dialogVisible2"
            width="20%"
          >
            <el-form>
              <el-form-item label="请输入员工的编号">
                <el-input v-model="rmEmp.eid"></el-input>
              </el-form-item>
            </el-form>

            <span slot="footer" >
              <el-button @click="dialogVisible2 = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible2 = false,remove()">确 定</el-button>
            </span>
          </el-dialog>

          <el-button type="primary" round @click="dialogVisible3 = true">修改员工信息</el-button>

            <el-dialog
              title="修改员工信息"
              :visible.sync="dialogVisible3"
              width="20%"
            >
              <el-form>
                <el-form-item label="请输入员工的编号">
                  <el-input v-model="updateEmp.eid"></el-input>
                </el-form-item>
              </el-form>
              
              <span slot="footer" >
                <el-button @click="dialogVisible3 = false">取 消</el-button>
                <el-button type="primary" @click="select1(updateEmp.eid)">确 定</el-button>

              <el-dialog
              :visible.sync="updateVisible"
              title='修改员工信息'
              width="25%"
              >
                <!-- <el-button v-on:click="editVisible1 = true">修改员工编号</el-button>
                <el-dialog
                :visible.sync="editVisible1"
                title='修改员工编号'
                width="25%"
                >
                  <el-form>
                    <el-form-item label="输入修改后的员工编号">
                      <el-input v-model="updateEmp.eid"></el-input>
                    </el-form-item>
                  </el-form>
                  <span slot="footer">
                      <el-button @click="editVisible1 = false">
                        取 消
                      </el-button>
                      <el-button type="primary" @click="editVisible1 = false,update()">
                        确 定
                      </el-button>

                  </span>
                </el-dialog> -->



            
                  <el-form>
                    <el-form-item label="输入修改后的员工姓名">
                      <el-input v-model="updateEmp.ename"></el-input>
                    </el-form-item>

              


                    <el-form-item label="输入修改后的员工密码">
                      <el-input v-model="updateEmp.epas"></el-input>
                    </el-form-item>



                    <el-form-item label="输入修改后的员工级别">
                      <el-input v-model="updateEmp.elevel"></el-input>
                    </el-form-item>




                    <el-form-item label="输入修改后的员工电话">
                      <el-input v-model="updateEmp.etelPhone"></el-input>
                    </el-form-item>




                  <el-form-item label="输入修改后的员工工资">
                    <el-input v-model="updateEmp.esalary"></el-input>
                  </el-form-item>

                  


                    <el-form-item label="输入修改后的员工备注">
                      <el-input v-model="updateEmp.other"></el-input>
                    </el-form-item>


                  </el-form>
                <span slot="footer">
                  <el-button @click="updateVisible = false,dialogVisible3 = false">取 消</el-button>
                  <el-button type="primary" @click="updateVisible = false,dialogVisible3 = false,update()">确 定</el-button>
                </span>
              </el-dialog>
            </span>
          </el-dialog>


          <el-button type="primary" round @click="dialogVisible4 = true">添加员工信息</el-button>

          <el-dialog
            title="添加员工"
            :visible.sync="dialogVisible4"
            width="20%"
          >
            <el-form>
              <!-- <el-form-item label="请输入员工的编号" >
                <span style="color:red">此为必填项</span>
                <el-input v-model="addEmp.eid"></el-input>
              </el-form-item> -->
              <el-form-item label="请输入员工的姓名">
                <span style="color:red">此为必填项</span>
                <el-input v-model="addEmp.ename"></el-input>
              </el-form-item>
              <el-form-item label="请输入员工的密码">
                <span style="color:red">此为必填项</span>
                <el-input v-model="addEmp.epas"></el-input>
              </el-form-item>
              <el-form-item label="请输入员工的级别">
                <span style="color:red">此为必填项</span>
                <el-input v-model="addEmp.elevel"></el-input>
              </el-form-item>
              <el-form-item label="请输入员工的电话">
                <span style="color:red">此为必填项</span>
                <el-input v-model="addEmp.etelPhone"></el-input>
              </el-form-item>
              <el-form-item label="请输入员工的工资">
                <el-input v-model="addEmp.esalary"></el-input>
              </el-form-item>
              <el-form-item label="请输入员工的备注">
                <el-input v-model="addEmp.other"></el-input>
              </el-form-item>
            </el-form>
            
            <span slot="footer" >
              <el-button @click="dialogVisible4 = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible4 = false,add()">确 定</el-button>
            </span>
          </el-dialog>

          
          <el-button type="primary" round @click="csv()">导出表格</el-button>

          <el-table :data="empData" border stripe style="width: 100%">
            <el-table-column prop="eid" label="员工编号" width="150"></el-table-column>
            <el-table-column prop="ename" label="员工姓名" width="150"></el-table-column>
            <el-table-column prop="elevel" label="员工级别" width="150"></el-table-column>
            <el-table-column prop="epas" label="员工密码" width="150"></el-table-column>
            <el-table-column prop="etelPhone" label="员工电话" width="150"></el-table-column>
            <el-table-column prop="esalary" label="员工工资" width="150" ></el-table-column>
            <el-table-column prop="other" label="备注" width="150"></el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";
// import {ref} from 'vue';
export default {
  data: function () {
    return {
      askEmp: {
        eid: '',
        ename:'',
        epas:'',
        elevel:'',
        etelPhone:'',
        eSalary:'',
        other:''
      }, 
      addEmp: {
        eid: '',
        ename:'',
        epas:'',
        elevel:'',
        etelPhone:'',
        eSalary:'',
        other:''
      },
       updateEmp: {
        eid: '',
        ename:'',
        epas:'',
        elevel:'',
        etelPhone:'',
        eSalary:'',
        other:''
      }, 
      rmEmp: {
        eid: '',
        ename:'',
        epas:'',
        elevel:'',
        etelPhone:'',
        eSalary:'',
        other:''
      },
      empData: [],
        /* {
                Eid:'1010',
                Ename:'骆洛',
                EPas:'mysql',
                Elevel:'02',
                EtelPhone:'110',
                ESalary:'5000',
                other:'工作努力'
            } */
      tmptb: [],
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      updateVisible: false,
      editVisible1: false,
      editVisible2: false,
      editVisible3: false,
      editVisible4: false,
      editVisible5: false,
      editVisible6: false,
      editVisible7: false,
      selectRes:false,

    };
  },
  methods: {
    //展示所有数据
    selectAll() {
      var that = this;
      axios.get("/TbEmployeeSelectAll").then(function (result) {
        if (result.data.code == 1) {
          that.empData = result.data.data; //result.data获取统一的json对象
          //result.data.data获取json对象中的属性data值
        } else {
          alert(result.data.msg);
        }
      });
    },
    //查
    select(Eid) {
      var that = this;
      axios({
            method: "get",
            url: "/TbEmployeeSelectByEid/"+Eid,
        }).then(result => {
          if(result.data.code==1){
            alert("查询成功");
            that.askEmp = result.data.data;
            that.tmptb[0]=that.askEmp;
             this.selectRes = true;
          }else{
            that.$message.error(result.data.msg);
          }
        })
    },
    select1(Eid) {
      var that = this;
      axios({
            method: "get",
            url: "/TbEmployeeSelectByEid/"+Eid,
        }).then(result => {
          if(result.data.code==1){
            alert("查询成功");
            that.updateEmp = result.data.data;
            this.updateVisible = true;
          }else{
            that.$message.error(result.data.msg);
          }
        })
    },
    //增加
    add() {
      var that = this;
      axios.post("/TbEmployeeInsert",this.addEmp).then(function (result) {
         if (result.data.code==1){
              that.$message.success(result.data.msg);
            //关闭对话框
            that.dialogVisible4=false;
            //重新加载表格数据
            that.selectAll();
        }else {
            that.$message.error(result.data.msg);
        }
      });
      /* axios({
            method: "post",
            url: "/TbEmployeeInsert",
            params: this.addEmp
        }).then(result => {
         if (result.data.code==1){
              that.$message.success(result.data.msg);
            //关闭对话框
            that.dialogVisible4=false;
            //重新加载表格数据
            that.selectAll();
          }else {
              that.$message.error(result.data.msg);
          }
        }) */
    },
    //删除
    remove() {
      //提示框
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info'
        }).then(() => {
            //通过axios调用我们的删除接口
            var that = this;
            axios.delete("/TbEmployeeDelete/"+ that.rmEmp.eid).then(function (result){
                if (result.data.code==1){
                    //1.弹出一个信息
                    that.$message.success(result.data.msg);
                    //2.重新加载表格数据
                    that.selectAll();
                }else {
                    //弹出一个信息
                    that.$message.error(result.data.msg)
                }
            })
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });
        });
    },
    update(){
      var that = this;
      // this.updateEmp = this.select(this.updateEmp.eid);
      axios.post("/TbEmployeeUpdate", this.updateEmp).then(function (result) {
          if (result.data.code == 1) {
              that.$message.success(result.data.msg);
              //关闭对话框
              that.Visible = false;
              //重新加载表格数据
              that.selectAll();
          } else {
              that.$message.error(result.data.msg);
          }
      })
    },csv(){
       /*axios.get("/TbEmployeeExport") .then(function () {
          if (result.data.code == 1) {
              that.$message.success(result.data.msg);
              //关闭对话框
              that.Visible = false;
              //重新加载表格数据
              that.selectAll();
          } else {
              that.$message.error(result.data.msg);
          }
      }) */
    window.location.href = 'http://localhost:8083/TbEmployeeExport'


    window.open('http://localhost:8083/TbEmployeeExport', '_self'); // _self参数设置是为了不跳转到新界面上去
    let link = document.createElement('a')
        link.href = 'http://localhost:8083/TbEmployeeExport'
        link.download = '下载文件名册'
        link.click()


    }
  },
  mounted() {
    
    axios({
            method: "get",
            url: "/TbEmployeeSelectAll",

        }).then(result => {
          if(result.data.code==1){
            this.empData=result.data.data;
          }else{
            alert(result.data.msg);
          }
        })

  },
  created() {
    this.selectAll();
  },
};
</script>

<style>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}
</style>